<template>
	<view class="container">
		<view class="u-abso u-abso-b-0 u-abso-l-0 u-abso-r-0" :style="{top: menu.height  + 'px' }"
			style="height: 1000rpx;">
			<image style="width: 100%;height: 100%;" src="/static/answer.png"></image>
		</view>
		<u-navbar title="答题页" :background="{backgroundColor: '#009774'}" :border-bottom="false" title-size="28"
			title-color="#fff" back-icon-color="#fff" back-icon-size="30"></u-navbar>
		<view class="u-rela box" :style="{paddingTop: (menu.height == 36 ? menu.height + menu.height + 12 : menu.height) + 25 + 'px'}">
			<view class="u-font-34 white u-text-center">第{{answerIndex+1}}/{{list.length}}题</view>
			<view class="u-m-tb-70 u-font-30 ">{{`(${temObj.is_type}题)${answerIndex+1 + '、'+temObj.topic}` }}</view>
			<view v-if="temObj.type == 1">
				<view class="u-p-30 u-font-26 selectBg u-radius-10 u-m-t-30" :class="{selected: item.option == selectTopic[answerIndex].answer}" v-for="(item,index) in temObj.options" :key="item.id" @click="addTopic(item)">
					{{item.option + '、'}}{{item.detail}}
				</view>
			</view>
			<view v-else>
				<view class="u-p-30 u-font-26 selectBg u-radius-10 u-m-t-30" :class="{selected: item.option == selectTopic[answerIndex].answer}" v-for="(item,index) in temObj.options" :key="item.id" @click="addTopic(item)">
					{{item.detail}}
				</view>
			</view>
		</view>
		<view class="u-rela btnBox" >
			<view v-if="answerIndex+1 != list.length">
				<u-button type="success" shape="circle"
					:custom-style="{background: 'linear-gradient(177deg, #11CCA8 1%, #009175 100%)'}" @click="nextTopic">下一题</u-button>
			</view>
			<view v-else class="u-flex u-row-between u-col-center">
				<u-button type="success" shape="circle" :custom-style="{background: 'rgba(0,151,116,0.1)',width: '305rpx',
height: '90rpx',border: '2rpx solid #009774',color: '#009774'}" @click="previousTopic">上一题</u-button>
				<u-button type="success" shape="circle" :custom-style="{background: 'linear-gradient(177deg, #11CCA8 1%, #009175 100%)',width: '305rpx',
height: '90rpx'}" @click="submit">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				answerIndex: 0,
				temObj: {},
				selectTopic: [],
				list: []
			}
		},

		onLoad() {
			this.findTopicList()
		},
		methods: {
			findTopicList(){
				this.$u.api.findTopicList().then(res => {
					this.list = res.data
					this.temObj = this.list[this.answerIndex]
				})
			},
			//提交
			submit(){
				if(!this.selectTopic[this.answerIndex]) return this.$u.toast('请选择')
				this.$u.api.addAnswer({data: this.selectTopic}).then(res => {
					this.$u.toast(res.msg)
					this.$u.api.getUserInfo().then(res => {
						this.$u.vuex('userInfo',res.data)
						this.$u.vuex('isLogin',true)
						setTimeout(() => {
							this.$u.route({url: '/pages/goods/index',type: 'redirectTo'})
						},1500)
					})
				}).catch(err => {
					this.$u.toast(err.msg)
				})
			},
			// 上一题
			previousTopic(){
				this.answerIndex -= 1
				this.temObj = this.list[this.answerIndex]
			},
			// 下一题
			nextTopic(){
				if(!this.selectTopic[this.answerIndex]) return this.$u.toast('请选择')
				this.answerIndex += 1
				this.temObj = this.list[this.answerIndex]
			},
			// 添加选择
			addTopic(item){
				this.$set(this.selectTopic,this.answerIndex,{topic_id: item.topic_id,answer: item.option})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		overflow: hidden;
	}

	.box {
		padding-top: 100rpx;
		padding-left: 60rpx;
		padding-right: 60rpx;

		.selectBg {
			background: #f7f7ff;

			&.selected {
				background: #CCEAE3;
			}
		}
	}

	.btnBox {
		padding-top: 300rpx;
		padding-left: 60rpx;
		padding-right: 60rpx;
	}
</style>